<style type="text/css">
  input:after {
    content: "";
    display: block;
  }
  input[type=range] {
    width: 20px;
    height: 100px;
     /*默认的取值是 slider-horizontal */
    -webkit-appearance: slider-vertical;  
  }

</style>
<form action="">
  
<br><br><br>type=email：<br> <input type=email>
<br><br><br>type=number：<br> <input type=number>
<br><br><br>type=tel：<br> <input type=tel>
<br><br><br>type=url：<br> <input type=url>
<br><br><br>type=search：<br> <input type=search>
<br><br><br>type=color：<br> <input type=color>

<br><br><br>type=range：<br> <input type=range>
<input type="range" min="0" max="10" step="2" value="6">

<br><br><br>type=date：<br> <input type=date>
<br><br><br>type=datetime：<br> <input type=datetime>
<br><br><br>type=datetime<br>-local： <input type=datetime-local>
<br><br><br>type=week：<br> <input type=week>
<br><br><br>type=month：<br> <input type=month>
<br><br><br>type=image：<br> <input type=image>

<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<input type=submit>
</form>
